<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6" v-for="(o, index) in furitList" :key="index">
                <el-card style="margin-bottom: 10px">
                    <div v-if="o.isCollect" style="margin-top: 10px;text-align: center;margin-bottom: 5px;
                    margin-top: -10px;border: 1px solid gray;background-color: #f9ca24;"
                    @click="handleCollect(o)">
                        收藏
                    </div>
                    <div v-else style="margin-top: 10px;text-align: center;margin-bottom: 5px;
                    margin-top: -10px;border: 1px solid gray;background-color: #f9ca24;"
                    @click="handleQXCollect(o)">
                        取消收藏
                    </div>
                    <img style="width:100%;height: 200px;" :src="o.image" class="image">
                    <div style="display: flex;margin-top: 5px;">
                        <div style="flex: 1;">
                            <span>{{ o.name }}</span>
                        </div>
                        <div>
                            <el-input-number size="mini" v-model="o.count" @change="handleChange(o, $event)" :min="0"
                                :max="1000" label="描述文字"></el-input-number>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { addCar, getCarByPage } from "@/api/car.js"
import { addCollect, getCollectById, quCollect } from "@/api/collect.js"
export default {
    props: ["furitList","detailId"],
    data() {
        return {
        }
    },

    created() {

    },
    methods: {
        handleCollect(row){
            addCollect({collectId: row.id}).then(res => {
                if(res.data.code == 200){
                    this.$message.success("收藏成功")
                    this.$emit('flushFruit', this.detailId)
                }
            })
        },
        handleQXCollect(row){
            quCollect({collectId: row.id}).then(res => {
                if(res.data.code == 200){
                    this.$message.success("取消成功")
                    this.$emit('flushFruit', this.detailId)
                }
            })
        },
        initCar() {
            getCarByPage({ page: 1, size: 1000 }).then(res => {
                this.$emit('sendValue', res.data.data.records)
            })
        },
        handleChange(o, currentValue) {
            let senddata = {
                fruitId: o.id,
                number: currentValue
            }
            addCar(senddata).then(res => {
                this.initCar()
            })
        }
    }
}
</script>